<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>消息中心</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="mainContent">
			<h3>消息中心</h3>
			<ul>
				<li v-for="item in 5">
					<h4>续费通知</h4>
					<p>您的产品使用期限即将截止，如需继续使用产品请扫码进行续费。 如使用期限截止，服务将暂停，使用数据将在3个月后删除，请注意及时备份。</p>
					<img src="" alt="">
					<span><i class="el-icon-time"></i>今天16：38</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	export default{
		data(){
			return{
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:70px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.mainContent{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		margin:24px auto 0;
		background:#fff;
		box-shadow: 0 4px 16px 0 #5572921a;
		border-radius: 14px;
		padding:44px 24px 55px;
	}
	.mainContent ul li{
		border-bottom:solid 1px #DEE1E7;
		padding:24px 0;
	}
	.mainContent h3{
		font-size:16px;
	}
	.mainContent ul li h4{
		font-size:14px;
	}
	.mainContent ul li p{
		font-size:12px;
		color:#B3B8C2;
		padding:10px 0;
	}
	.mainContent ul li span{
		font-size:12px;
		color:#B3B8C2;
		padding:10px 0;
	}
	.mainContent ul li:last-child{
		border:none;
	}
</style>